window.onload = function() {

    let navOpen = document.querySelector('.navOpen')
    let showId = document.querySelectorAll('.showId')
    let sameNavOpen = document.querySelectorAll('.sameNavOpen')
        // --------
    let showId1 = document.querySelector('.showId1')
    let openNav1 = document.querySelector('.openNav1')
    let showId2 = document.querySelector('.showId2')
    let openNav2 = document.querySelector('.openNav2')
    let showId3 = document.querySelector('.showId3')
    let openNav3 = document.querySelector('.openNav3')
    let showId4 = document.querySelector('.showId4')
    let openNav4 = document.querySelector('.openNav4')
    let showId5 = document.querySelector('.showId5')
    let openNav5 = document.querySelector('.openNav5')

    // 这个是排他思想的把全部背景黑色和下拉框去除掉
    function forShowAndHidden() {
        for (let i = 0; i < showId.length; i++) {
            showId[i].classList.remove('navBackgroundFirst')
            sameNavOpen[i].style.display = 'none'
            navOpen.style.display = 'none'
        }
    }

    // 封装一个函数，a是操作黑色背景色，b是操作下拉框样式
    function encapStyle(a, b) {
        a.addEventListener('mouseover', function(e) {
            forShowAndHidden()
            a.classList.add('navBackgroundFirst')
            b.style.display = 'block'
            navOpen.style.display = 'block'
        })
        a.addEventListener('mouseout', function() {
            a.classList.remove('navBackgroundFirst')
            b.style.display = 'none'
            navOpen.style.display = 'none'
        })
        b.addEventListener('mouseover', function(e) {
            forShowAndHidden()
            a.classList.add('navBackgroundFirst')
            b.style.display = 'block'
            navOpen.style.display = 'block'
        })
        b.addEventListener('mouseout', function() {
            a.classList.remove('navBackgroundFirst')
            b.style.display = 'none'
            navOpen.style.display = 'none'
        })
    }

    encapStyle(showId1, openNav1)
    encapStyle(showId2, openNav2)
    encapStyle(showId3, openNav3)
        // encapStyle(showId4, openNav4)
        // encapStyle(showId5, openNav5)
    showId4.addEventListener('mouseover', function() {
        forShowAndHidden()
        this.classList.add('navBackgroundFirst')
    })
    showId4.addEventListener('mouseout', function() {
        this.classList.remove('navBackgroundFirst')
    })
    showId5.addEventListener('mouseover', function() {
        forShowAndHidden()
        this.classList.add('navBackgroundFirst')
    })
    showId5.addEventListener('mouseout', function() {
        this.classList.remove('navBackgroundFirst')
    })

}